<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>div</title>
<style type="text/css">
html, body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}
.caja1 {
	height: 90%;
	width: 50%;
	background-color: #FF9;
	float: left;
}
.caja2 {
	height: 50%;
	width: 50%;
	background-color: #CCF;
	position: absolute;
	left: 25%;
	top: 23%;
}
.caja3 {
	height: 90%;
	width: 50%;
	float: left;
	background-color: #CFC;
}

.caja4 {
	height: 10%;
	background-color: #FC6;
	clear: both;
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
}
</style>
</head>

<body>
  <div class="caja1">caja 1 con float</div>
<div class="caja2">Caja 2 con tamaño y posición absoluta en porcentage</div>
  <div class="caja3">caja 3 con float</div>
<div class="caja4">caja 4 con fixed</div>
</body>
</html>
